<template>
	<div class="fans">
		<!-- 当没有关注或者粉丝时 提示 -->
		<div class="info_empty" v-if="!info.length">
			<el-empty
				:description="
					activeName == 'following'
						? '还没有被关注'
						: '还没有关注其他人'
				"
			></el-empty>
		</div>
		<ul v-else>
			<li v-for="item in info" :key="item.userId">
				<div class="fans_avatar">
					<el-avatar
						shape="square"
						:size="80"
						:src="item.avatar"
					></el-avatar>
				</div>
				<div class="fans_info">
					<div class="name">
						<router-link
							:to="{
								path: `/user/space/${activeName}`,
								query: { userId: item.userId },
							}"
						>
							{{ item.name }}
						</router-link>
					</div>
					<div class="info">
						<span>粉丝：{{ item.follows_len }}</span>
						<span> | </span>
						<span>关注：{{ item.following_len }}</span>
					</div>
					<div class="desc">简介：{{ item.sign }}</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	props: {
		info: {
			// 粉丝或关注列表
			type: Array,
			default: () => [],
		},
		activeName: {
			type: String,
			default: 'fans',
		},
	},
};
</script>

<style lang="sass" scoped>
.fans
	ul

		li
			font-size: 14px
			display: flex
			padding: 20px
			border-bottom: 1px solid #000
			.fans_avatar
				width: 80px
				height: 80px
				margin-right: 30px
			.fans_info
				display: flex
				flex-direction: column
				justify-content: space-around

		li:last-child
			border-bottom: 0
</style>
